
import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaProgress } from "ecCom";
import { Row, Col, Progress, Spin, Button, Icon } from 'antd';
import "./style/index.css";

@inject('invoiceStore')
@observer
export default class InvoiceGroup extends React.Component {
	constructor(props) {
		super(props);
		const item = props.item||{};
		this.state = {
			showEdit: false,
			isSekect: "",
			item: item
		}
	}
	showDetail=(id,type=0)=>{
		const {modeInfo} = this.props.invoiceStore;
		window.open(`#/main/cube/card?type=${type}&billid=${id}&modeId=${modeInfo.modeId}&formId=${modeInfo.formId}`);

	}


	showOperate=(showEdit)=>{
		const isSekect = showEdit?" selectedItem":"";
		this.setState({showEdit:showEdit,isSekect:isSekect});
	}

	render() {
		const {showEdit,isSekect,item} = this.state;
		const {modeInfo,rights} = this.props.invoiceStore;
		return (

			<Col  className="ticket-row" xs={20} sm={16} md={12} lg={8} onMouseOver={(bool)=>this.showOperate(true)} onMouseOut={(bool)=>this.showOperate(false)}>
				<div className={"ticket-card-box "+isSekect} onClick={()=>{}}>
					<div className="ticket-card-header">
						<div className="header-circle-outer"> <div className="header-circle-inner"></div></div>
						<div className="header-circle-title">{item.type||"-"}</div>
						<div className="header-circle-code">NO: {item.code||"-"}</div>
					</div>
					<div className="ticket-card-body">
						<div><span><strong>发票抬头: </strong></span><span>{item.cust||"-"}</span></div>
						{/* <div><span>开票人: </span><span>{"系统管理员"}</span></div> */}
						<div><span>开票日期: </span><span>{item.ticket_date||"-"}</span></div>
						<div><span>开票金额: </span><span className="ticket-card-body-count">{'￥'+(item.ticketCount||0)}</span></div>
						{/* <div><span>税率: </span><span>{""}</span></div> */}
						<div><span>开票金额占比: </span><WeaProgress className={"progress"} percent={item.progress||0} strokeColor="#108ee9" strokeWidth={8} status="active" /></div>
					</div>
					<div style={{height:"40px"}}>
						{/* {JSON.stringify(rights[item.id])&&rights[item.id].view?<span onClick={()=>this.showDetail(item.id,0)} className="icon-coms-Journal" style={{display:showEdit?"inline-block":"none",color:"#108ee9",cursor:'pointer',marginRight:'15px'}} title="详情"></span>:null}
						{JSON.stringify(rights[item.id])&&rights[item.id].edit?<span onClick={()=>this.showDetail(item.id,2)} className="icon-coms-Journal-o" style={{display:showEdit?"inline-block":"none",color:"#108ee9",cursor:'pointer',marginRight:'15px'}} title="编辑"></span>:null} */}
						<div style={{float:"right",paddingTop:"5px"}}>
							{JSON.stringify(rights[item.id])&&rights[item.id].view?<Button type="ghost" onClick={()=>this.showDetail(item.id,0)} style={{display:showEdit?"inline-block":"none",marginRight:'15px'}} title="详情">详情</Button>:null}
							{JSON.stringify(rights[item.id])&&rights[item.id].edit?<Button type="ghost" onClick={()=>this.showDetail(item.id,2)} style={{display:showEdit?"inline-block":"none",marginRight:'15px'}} title="编辑">编辑</Button>:null}

						</div>
						
					</div>
				</div>
			</Col>
		)

	}

}